<template>
	<view>
		<view class="input_box">
			<view v-if="label" class="name">
				{{label}}
			</view>
			<input 
				class="input" 
				@input="inputFun" 
				:value="modelValue" 
				:focus="focus"
				:disabled="disabled"
				@focus="focusFun"
				@blur="blurFun"
				:type="type"
				:placeholder="placeholder" />
		</view>
	</view>
</template>

<script setup>
	import {dynamicStyleStore} from '@/stores/dynamicStyle.js'
	
	const dynamicStyle_store = dynamicStyleStore()
	
	const {
		primary_cool_color,
		primary_text_color
	} = dynamicStyle_store.globalStyle
	
	const props=defineProps({
		modelValue: {
		    type: String
		},
		label:{
			type:String
		},
		placeholder:{
			type:String,
			default:''
		},
		required:{
			type:Boolean,
			default:false
		},
		inputWidth:{
			type:String,
			default:'80%'
		},
		type:{
			type:String,
			default:''
		},
		borderColor:{
			type:String
		},
		color:{
			type:String,
			default:'#33465F'
		},
		fontSize:{
			type:String,
			default:'14px'
		},
		vertical:{
			type:String,
			default:'center'
		},
		focus:{
			type:Boolean,
			default:false
		},
		height:{
			type:String,
			default:'60rpx'
		},
		width:{
			type:String,
			default:'100%'
		},
		focusFun:{
			type:Function,
			default:()=>{}
		},
		disabled:{
			type:Boolean,
			default:false
		},
		labelColor:{
			type:String,
			default:'#33465F'
		}
	})
	const emit = defineEmits(['update:modelValue'])
	
	const inputFun=(e)=>{
		emit('update:modelValue',e.detail.value)
	}
	
	const blurFun=()=>{
		if(props.required && !props.modelValue.trim()){
			uni.$emit('tips',`请输入${props.label}`,'warn')
		}
	}
</script>

<style lang="less">
	.input_box{
		display: flex;
		justify-content: v-bind(vertical);
		align-items: center;
		width: v-bind(width);
		.name{
			color:v-bind(labelColor);
			margin-right: 6px;
		}
		.input{
			width: v-bind(inputWidth);
			border-bottom: 1rpx solid v-bind(borderColor);
			font-size: v-bind(fontSize);
			color:v-bind(color);
			height: v-bind(height);
		}
	}
</style>